import React, { Component }from 'react';
import WeUI from 'react-weui';

import 'weui';
import 'react-weui/build/packages/react-weui.css';
import '../media/css/style.scss';


import IconUser from '../media/img/user.png';
import IconHome from '../media/img/home.png';

const {
    Tab, 
    TabBarItem, 
    TabBar, 
    TabBody,
    Cells,
    Cell,
    CellBody,
    CellFooter,
    CellHeader,
    Badge,
} = WeUI;


export default class BDUser extends Component {
    constructor(props){
        super(props);
    }

    clickHandle(url){
        this.props.history.push(url);
    }

    render(){
        return (
            <Tab>
                <TabBody>
                    <div>
                        <Cells>
                            <Cell onClick={this.clickHandle.bind(this, "/login")}>
                                <CellHeader style={{ position: 'relative', marginRight: '10px' }}>
                                    <img src={ IconUser } style={{width:'50px', display:'block'}}></img>
                                </CellHeader>
                                <CellBody>
                                    <p>大佬</p>
                                    <p style={{ fontSize: '13px', color: '#888888' }}>欢迎来到图书漂流！</p>
                                </CellBody>
                            </Cell>
                            <Cell access onClick={this.clickHandle.bind(this, "/order")}>
                                <CellBody>
                                    订单 <Badge preset="body">8</Badge>
                                </CellBody>
                                <CellFooter />
                            </Cell>
                            <Cell access onClick={this.clickHandle.bind(this, "/order")}>
                                <CellBody>
                                    发出的申请 <Badge preset="body">8</Badge>
                                </CellBody>
                                <CellFooter />
                            </Cell>
                            <Cell access onClick={this.clickHandle.bind(this, "/order")}>
                                <CellBody>
                                    收到的申请 <Badge preset="body">8</Badge>
                                </CellBody>
                                <CellFooter />
                            </Cell>
                            <Cell access onClick={this.clickHandle.bind(this, "/order")}>
                                <CellBody>
                                    收藏
                                </CellBody>
                                <CellFooter />
                            </Cell>
                            <Cell access onClick={this.clickHandle.bind(this, "/address")}>
                                <CellBody>
                                    地址
                                </CellBody>
                                <CellFooter />
                            </Cell>

                            <Cell access onClick={this.clickHandle.bind(this, "/about")}>
                                <CellBody>
                                    帮助
                                </CellBody>
                                <CellFooter />
                            </Cell>
                            <Cell access onClick={this.clickHandle.bind(this, "/about")}>
                                <CellBody>
                                    关于
                                </CellBody>
                                <CellFooter />
                            </Cell>
                            <Cell>
                                <CellBody>
                                    版本
                                </CellBody>
                                <CellFooter>
                                    V1.1.0
                                </CellFooter>
                            </Cell>
                            <Cell access onClick={this.clickHandle.bind(this, "/logout")}>
                                <CellBody>
                                    退出
                                </CellBody>
                                <CellFooter />
                            </Cell>
                        </Cells>
                    </div>
                </TabBody>

                <TabBar >
                    <TabBarItem active={true} icon={<img src={IconHome} />} label="书单" active={false}
                     onClick={this.clickHandle.bind(this, "/")} />
                     
                     <TabBarItem icon={<img src={IconUser} />} label="我" active={true} />
                </TabBar>
            </Tab>
        );
    }
};